<script setup>
import { ref, inject, getCurrentInstance } from 'vue';
import noticeItem from './components/noticeItem.vue';
import { dbNavPage } from '@/utils';
const { statusHeight } = getApp().globalData;
const noticeObj = uniCloud.importObject('notice');
const noticeList = ref([]);
const id = ref('');
const proxy = getCurrentInstance().proxy;
function noticeGet() {
	proxy.$httpobj('notice', 'getList').then((res) => {
		console.log('res', res);
		if (res.data) {
			noticeList.value = res.data;
		}
	});
}

function getById() {
	noticeObj.getByid(id.value).then((res) => {
		console.log('res', res);
	});
}
// 12312312312312
const exampleWebSocket = ref(null);
async function init() {
	// 这个链接 会自动心跳不用管中断的情况
	exampleWebSocket.value = await uniCloud.connectWebSocket({
		name: 'ws-chat',
		query: {
			userId: '67680cc6fae75ca7cde03157x'
		}
	});

	// 连接成功时触发
	exampleWebSocket.value.onOpen((event) => {
		setTimeout(() => {
			exampleWebSocket.value.send('heool');
		});
	});

	// 收到数据时触发
	exampleWebSocket.value.onMessage((event) => {
		console.log('WebSocket:message', JSON.parse(event.data));
	});

	// 连接被关闭时触发
	exampleWebSocket.value.onClose((event) => {
		console.log('WebSocket:close', event);
	});

	// 连接因错误而关闭时触发
	exampleWebSocket.value.onError((event) => {
		console.log('WebSocket:error', event);
	});
}

setTimeout(() => {
	noticeGet();
	init();
}, 0);
</script>

<template>
	<view class="page page-box">
		<view class="" :style="{ height: statusHeight }"></view>
		<view class="scroll-container flex-c-c">
			<scroll-view scroll-x class="scroll-text flex-c-c">
				<view id="text2">上车前请核实司机身份，夜间出行请注意安全</view>
			</scroll-view>
		</view>
		<view class="com-box top-box">
			<view class="flex-c-c flex-dc" @click="dbNavPage('/pagesA/map/map')">
				<image src="../../static/home/car.png" mode=""></image>
				<text>出行</text>
			</view>
			<view class="flex-c-c flex-dc">
				<image src="../../static/home/car.png" mode=""></image>
				<text>我的订单</text>
			</view>
		</view>
		<image src="https://env-00jxhkmrurgf.normal.cloudstatic.cn/banner/banner.jpg" mode="" class="banner"></image>
		<view class="flex-1 main">
			<noticeItem v-for="(item, index) in noticeList" :item="item" :key="item._id"></noticeItem>
			<empty v-if="noticeList.length == 0" text="暂无公告"></empty>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.page-box {
	background: linear-gradient(to bottom, #1686ff, #00bfff);
	background: #d2dce8;
	padding-bottom: 0;
	height: calc(100vh - 60px);
}

.banner {
	width: calc(100vw - 40rpx);
	margin: 0 auto;
	height: 240rpx;
	margin-top: 20rpx;
	border-radius: 18rpx;
	z-index: 2;
}
.main {
	background-color: #f8f8f8;
	margin-top: -80rpx;
	padding-top: 90rpx;
	border-radius: 20rpx;
	overflow-y: auto;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.top-box {
	display: flex;
	justify-content: space-around;
	image {
		width: 70rpx;
		height: 70rpx;
	}
}

.scroll-container {
	margin-top: 21px;
	margin-bottom: 20rpx;
	height: 24px;
	overflow: hidden;
	white-space: nowrap;
	background-color: #ffca28;
	color: #fff;
}

.scroll-text {
	display: flex;
	flex-direction: row;
	animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}
</style>
